<template>
  <div class="container">
    <div class="title">
      <h2>用户管理</h2>
      <h5>用于管理小区里不定期举办的各种活动</h5>
    </div>
    <!-- 标题 -->
    <el-card class="box-card">
      <el-form class="demo-form-inline">
        <el-form-item label="用户名">
          <el-input v-model="queryData.username" placeholder="请输入" :clearable="true" />
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="queryData.nickname" placeholder="请输入" :clearable="true" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="queryData.phone" placeholder="请输入" :clearable="true" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryData.status" placeholder="请选择">
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="queryData.create_time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item class="btn">
          <el-button
            type="primary"
            size="small"
            @click="search"
          >搜索</el-button>
          <el-button
            style="margin-left: 10px"
            size="small"
            @click="reset"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 表格 -->
    <el-card class="tableCard">
      <el-button
        style="float: right; padding: 10px 20px; margin-right: 80px"
        type="primary"
        size="small"
        class="addMenu"
        @click="openUserDialog"
      >新增项目</el-button>
      <el-table :data="tableData">
        <el-table-column prop="id" label="ID" width="60px" />
        <el-table-column prop="username" label="用户名" width="120px" />
        <el-table-column prop="nickname" label="昵称" width="120px" />
        <el-table-column prop="avatar" label="头像" width="120px">
          <!-- <template #default="{ row }">
            <img :src="'http://124.223.14.236:8881' + row.avatar" alt="" style="width:40px">
          </template> -->
          <template #default="{row}">
            <el-image
              style="width: 40px; height: 40px"
              :src=" row.avatar ? 'http://124.223.14.236:8881' + row.avatar : defaultImg"
              :preview-src-list=" [row.avatar ?'http://124.223.14.236:8881'+ row.avatar : defaultImg]"
            />
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="120px" />
        <el-table-column prop="email" label="Email" />
        <el-table-column prop="roleList" label="角色名">
          <template #default="{ row }">
            <el-tag v-for="item in row.roleList" :key="item.id" size="mini" type="success">{{ item.name }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="120px">
          <template #default="{ row }">
            {{ handleStatus(row.status) }}
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间">
          <template #default="{ row }">
            {{ formatterTime(row.create_time) }}
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column fixed="right" label="操作">
          <template #default="{ row }">
            <el-button type="text" size="small" @click="editUser(row.id)">编辑</el-button>
            <el-button type="text" size="small" @click="delUser(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page="queryData.current"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 抽屉 -->
    <user-dialog ref="userComponent" @updata="initData" />
  </div>
</template>

<script>
import { getUserInfoListApi } from '@/api/auth/user'
import { delUserApi } from '@/api/auth/user'
import UserDialog from './components/user-dialog.vue'
import dayjs from 'dayjs'
import defaultImg from '@/assets/common/bigUserHeader.png'
export default {
  name: 'AutoUser',
  components: {
    UserDialog
  },
  data() {
    return {
      tableData: [],
      // 搜索区域状态
      statusList: [
        { value: 0, name: '关闭' },
        { value: 1, name: '启用' }
      ],
      queryData: {
        status: null,
        current: 1,
        pageSize: 10,
        create_time: '',
        username: '',
        nickname: '',
        phone: ''
      },
      total: 0,
      defaultImg: defaultImg
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 初始化数据
    async initData() {
      const { data: res } = await getUserInfoListApi(this.queryData)
      this.total = res.count
      this.tableData = res.rows
    },
    // 处理状态
    handleStatus(data) {
      if (data === 1) {
        return '启用'
      }
      if (data === 0) {
        return '关闭'
      }
    },
    // 处理时间
    formatterTime(value) {
      return value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : ''
    },
    // 分页器 => 每页显示条数
    handleSizeChange(val) {
      this.queryData.pageSize = val
      this.queryData.current = 1
      this.initData()
    },
    // 分页器 => 当前页
    handleCurrentChange(val) {
      this.queryData.current = val
      this.initData()
    },
    // 删除
    async delUser(id) {
      try {
        await this.$confirm('确定要删除用户吗？', '温馨提示')
      } catch (error) {
        return this.$message('已取消')
      }
      await delUserApi(id)
      this.$message.success('删除成功')
      this.initData()
    },
    // 新增打开弹窗
    openUserDialog() {
      this.$refs.userComponent.drawer = true
      this.$refs.userComponent.getRoleList()
    },
    // 用户信息回显
    editUser(id) {
      this.$refs.userComponent.getUserDetail(id)
    },
    async search() {
      // console.log(+new Date(this.queryData.create_time[0]), '第一次')
      // console.log(+new Date(this.queryData.create_time[1]), '第二次')
      // 将选择的时间通过map方式去遍历，将遍历的每一项都进行转化成时间戳
      if (this.queryData.create_time) {
        this.queryData.create_time = this.queryData.create_time.map(item => {
          return +new Date(item)
        }).join(',')
      }
      const { data: res } = await getUserInfoListApi(this.queryData)
      this.tableData = res.rows
      this.total = res.count
    },
    // 重置
    reset() {
      this.queryData = {
        status: null,
        current: 1,
        pageSize: 10,
        create_time: '',
        username: '',
        nickname: '',
        phone: ''
      }
      this.initData()
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0 40px;
  .addMenu {
    margin-bottom: 15px;
    margin-right: 0 !important;
  }
  .title {
    display: flex;
    align-items: center;
    h2 {
      margin-right: 20px;
    }
    h5 {
      font-weight: 400;
      color: #9c9c9d;
      vertical-align: middle;
    }
  }
  .demo-form-inline {
    display: flex;
  }
  .el-form-item {
    margin-right: 22px;

    ::v-deep .el-input__inner {
      height: 35px;
      line-height: 35px;
      width: 200px;
    }
  }

  .btn {
    padding-top: 40px;
    ::v-deep .el-form-item__content {
      display: flex;
    }
  }
  .box-card {
    margin-bottom: 10px;
  }
  .el-pagination {
    float: right;
    margin-top: 20px;
  }
}
</style>

